<template>
  <div class="app-container home">

    <el-container>
      <el-header height="68px">
        <el-card style="padding: 0;font-size: 25px">
          <el-icon class="el-icon--right">
            <ElementPlus/>
          </el-icon>
          <span>{{ props.farmName }}·{{ props.deviceType }}·{{ props.position }}·{{ props.model }}</span>
        </el-card>
      </el-header>

      <el-container>
        <el-container>
          <el-container style="height: 70vh">
            <el-aside width="200px">
              <el-card style="height: 100%; display: flex; align-items: center; justify-content: center;">
                <img class="show-icon" src="@/assets/images/deviceTypes/风机.gif">
              </el-card>
            </el-aside>
            <el-main>
              <el-row style="height: 40%" justify="center">
                <el-col :sm="24" :lg="7">
                  <el-card class="up-card">
                    <template #header>
                      <el-icon>
                        <Finished/>
                      </el-icon>
                      当前风速
                    </template>
                    <el-container class="content" justify="center">

                      <el-statistic v-if="conBridge" value="123" style="--el-statistic-content-font-size: 40px; line-height: 120px">
                        <template #suffix>
                          <span class="unit">M/s</span>
                        </template>
                      </el-statistic>
                    <el-empty v-if="!conBridge" description="请连接传感器" image-size="80px" style="height:15vh;display: flex; align-items: center; justify-content: center;"></el-empty>
                    </el-container>
                  </el-card>
                </el-col>

                <el-col :sm="24" :lg="7">
                  <el-card class="up-card">
                    <template #header>
                      <el-icon>
                        <Finished/>
                      </el-icon>
                      偏航角
                    </template>
                    <el-container class="content" justify="center">
                      <el-statistic v-if="conBridge" value="123" style="--el-statistic-content-font-size: 40px; line-height: 120px">
                        <template #suffix>
                          <span class="unit">M/s</span>
                        </template>
                      </el-statistic>
                      <el-empty v-if="!conBridge" description="请连接传感器" image-size="80px" style="height:15vh;display: flex; align-items: center; justify-content: center;"></el-empty>
                    </el-container>
                  </el-card>
                </el-col>

                <el-col :sm="24" :lg="7">
                  <el-card class="up-card">
                    <template #header>
                      <el-icon>
                        <Finished/>
                      </el-icon>
                      当前功率
                    </template>
                    <el-container class="content" justify="center">
                      <el-statistic v-if="conBridge" value="123" style="--el-statistic-content-font-size: 40px; line-height: 120px">
                        <template #suffix>
                          <span class="unit">M/s</span>
                        </template>
                      </el-statistic>
                      <el-empty v-if="!conBridge" description="请连接传感器" image-size="80px" style="height:15vh;display: flex; align-items: center; justify-content: center;"></el-empty>
                    </el-container>
                  </el-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col sm="24" lg="24">
                  <div class="clearfix">
                    <span>实时功率曲线</span>
                  </div>
                  <v-chart class="upChart" :option="powerCharts" autoresize/>
                </el-col>
              </el-row>
            </el-main>
          </el-container>

        </el-container>
        <el-aside width="200px">
          <el-card style="height: 100%; display: flex; align-items: center; justify-content: center;">
            ▼运行开关
            <el-radio-group v-model = "detail.status" @change="updateStatus">
              <el-radio label="1">开启</el-radio>
              <el-radio label="3">关闭</el-radio>
            </el-radio-group>
          </el-card>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup name="Index">
import {Warning} from "@element-plus/icons-vue";

import {ref} from "vue";
import {getDevice_manage, listDevice_manage, updateDevice_manage} from "@/api/device_manage/device_manage.js";


const route = useRoute()

const loading = ref(false)
const device_manageDetail = reactive({
  farmId: null,
  equipmentType: null,
  model: null,
  installDate: null,
  location: null,
  status: null,
})

const conBridge = false;
const detail = ref(device_manageDetail)

function init() {
  loading.value = true;
  getDevice_manage(route.query.id).then(response => {
    detail.value = response.data;
    loading.value = false;
  })

}


const props = ref(
    {
      farmName: route.query.farmName,
      id: route.query.id,
      deviceType: route.query.deviceType,
      position: route.query.position,
      model: route.query.model,
      status: route.query.status
    })

const item = ref({
  url: "@/assert/images/deviceTypes/" + props.value.deviceType + ".gif",
})

// 随机生成数据的函数（0-50 的随机数）
const generateRandomData = () => Array.from({ length: 7 }, () => Math.floor(Math.random() * 50));

// 获取最近时间标签（格式：HH:mm:ss）
const getRecentTimeLabels = (count = 7) => {
  const now = new Date();
  return Array.from({ length: count }, (_, i) => {
    const timePoint = new Date(now.getTime() - (count - i - 1) * 5000);
    return `${timePoint.getHours().toString().padStart(2, '0')}:${timePoint.getMinutes().toString().padStart(2, '0')}:${timePoint.getSeconds().toString().padStart(2, '0')}`;
  });
};

const powerCharts = ref({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: getRecentTimeLabels() // 使用函数生成最近时间标签
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: generateRandomData(), // 使用函数生成随机数据
      type: 'line',
      areaStyle: {}
    }
  ]
});

import { onMounted, onUnmounted } from 'vue';

function updateStatus(value) {
  detail.value.status = value;
  updateDevice_manage(detail.value);
}

let intervalId = null;

const updateChartData = () => {
  powerCharts.value.xAxis.data = getRecentTimeLabels();
  powerCharts.value.series[0].data = generateRandomData();
};

onMounted(() => {
  // 开始定时任务
  intervalId = setInterval(() => {
    updateChartData();
  }, 5000);
});

onUnmounted(() => {
  // 清除定时器
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
});


init();

</script>

<style scoped lang="scss">
.clearfix {
  font-size: 20px;
}

.upChart {
  height: 260px;
}

.el-row {
  margin-bottom: 10px;
}

.aside-card {
  height: 100%;
}

.el-header {
  padding: 0;
}

.el-aside {
  padding: 0;
}

.up-card {
  margin: 5px;
  height: 100%;

}

.show-icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.content{
  display: flex;
  flex-direction: column;
  align-items: center;     // 水平居中
  justify-content: center; // 垂直居中
  height: 100%;            // 确保卡片内部撑满高度
}
</style>

